<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps({
  widthNum: {
    type: Number,
    default: 600,
  },
  heightNum: {
    type: Number,
    default: 400,
  },
  color: {
    type: String,
    default: '#0e2a43',
  },
});

const emit = defineEmits(['select']);

const width = ref<number>(props.widthNum);
const height = ref<number>(props.heightNum);
const gap = ref<number>(8);
const watermarkValue = ref<boolean>(true);
const link = ref<string>('//datav.oss-cn-hangzhou.aliyuncs.com/uploads/templates/7.png');
const color = ref<string>(props.color);
const maskVisible = ref<boolean>(false);

// 背景图片移入
function onMouseenter() {
  maskVisible.value = true;
}
// 背景图片移出
function onMouseleave() {
  maskVisible.value = false;
}

function onWidthChange(val: number) {
  width.value = val;
  emit('select', {
    width: val,
    height: height.value,
    color: color.value,
  });
}

function onHeightChange(val: number) {
  height.value = val;
  emit('select', {
    width: width.value,
    height: val,
    color: color.value,
  });
}

function onColorChange(val: string) {
  color.value = val;
  emit('select', {
    width: width.value,
    height: height.value,
    color: val,
  });
}

function onReset() {
  color.value = '#0e2a43';
  onColorChange(color.value);
}
</script>

<template>
  <header>
    页面设置
  </header>
  <main>
    <div class="width-height">
      <div>屏幕大小</div>
      <div class="btn-number">
        <el-input-number
          v-model="width"
          :min="1"
          :max="20000"
          size="small"
          controls-position="right"
          @change="onWidthChange"
        />
        <div>宽度</div>
      </div>
      <div class="btn-number">
        <el-input-number
          v-model="height"
          :min="1"
          :max="20000"
          size="small"
          controls-position="right"
          @change="onHeightChange"
        />
        <div>高度</div>
      </div>
    </div>
    <div class="b-color">
      <div>背景颜色</div>
      <div>
        <el-input
          v-model="color"
          class="color"
          @change="onColorChange"
        />
        <el-color-picker
          v-model="color"
          size="small"
          @change="onColorChange"
        />
      </div>
    </div>
    <div class="b-img">
      <div>背景图</div>
      <div>
        <el-input
          v-model="link"
          class="link"
          placeholder="Type something"
          prefix-icon="Link"
        />
        <div
          class="avatar"
          @mouseenter="onMouseenter"
          @mouseleave="onMouseleave"
        >
          <img src="https://datav.oss-cn-hangzhou.aliyuncs.com/uploads/templates/7.png">
          <div
            v-show="maskVisible"
            class="mask"
          >
            <span>更改</span>
            <span>预览</span>
            <span>删除</span>
          </div>
        </div>
      </div>
    </div>
    <div class="reset">
      <div>重置</div>
      <div @click="onReset">恢复默认背景</div>
    </div>
    <div class="zoom">
      <div>页面缩放方式</div>
      <div>
        <el-tooltip
          effect="dark"
          content="全屏铺满"
          placement="bottom"
          :enterable="false"
        >
          <el-icon>
            <FullScreen />
          </el-icon>
        </el-tooltip>
        <el-tooltip
          effect="dark"
          content="等比缩放宽度铺满"
          placement="bottom"
          :enterable="false"
        >
          <el-icon>
            <Back />
          </el-icon>
        </el-tooltip>
        <el-tooltip
          effect="dark"
          content="等比缩放高度铺满"
          placement="bottom"
          :enterable="false"
        >
          <el-icon>
            <Top />
          </el-icon>
        </el-tooltip>
        <el-tooltip
          effect="dark"
          content="等比缩放高度铺满(可滚动)"
          placement="bottom"
          :enterable="false"
        >
          <el-icon>
            <Rank />
          </el-icon>
        </el-tooltip>
        <el-tooltip
          effect="dark"
          content="不缩放"
          placement="bottom"
          :enterable="false"
        >
          <el-icon>
            <CircleClose />
          </el-icon>
        </el-tooltip>
      </div>
    </div>
    <div class="gap">
      <div>删格间距</div>
      <div>
        <el-input-number
          v-model="gap"
          :min="1"
          :max="20000"
          size="small"
          controls-position="right"
        />
      </div>
    </div>
    <div class="watermark">
      <div>DataV 水印</div>
      <el-switch
        v-model="watermarkValue"
        size="small"
      />
    </div>
  </main>
  <footer>
    <div class="thumb">
      <div>缩略图</div>
      <div class="cover">
        <div>
          <span>截取封面</span>
          <span>上传封面</span>
        </div>
        <div class="screen-preview">
        </div>
        <div class="upload-tip">*选中封面，从剪贴板粘贴</div>
      </div>
    </div>
  </footer>
</template>

<style lang="scss" scoped>
header {
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #bcc9d4;
  background-color: #2E343C;
}
main {
  background-color: hsl(215, 15%, 13%);

  :deep(.el-input__inner) {
    color: #bcc9d4;
  }

  :deep(.el-input-number__increase) {
    border: none !important;
    background-color: #262C33;
  }

  :deep(.el-input-number__decrease) {
    border: none !important;
    background-color: #262C33;
  }

  .width-height {
    display: flex;
    padding: 16px 8px 4px 28px;

    &>div:nth-child(1) {
      width: 104px;
      font-size: 12px;
      line-height: 24px;
      color: #bcc9d4;
    }

    &>div:nth-child(2) {
      margin-right: 8px;
    }

    .btn-number {
      color: #5C6366;
      font-size: 12px;
      .el-input-number--small {
        width: 92px;
      }
    }
  }

  .b-color {
    display: flex;
    padding: 4px 8px 4px 28px;

    &>div:nth-child(1) {
      width: 104px;
      font-size: 12px;
      color: #bcc9d4;
    }

    &>div:nth-child(2) {
      display: flex;
      align-items: center;
      position: relative;

      .color {
        height: 24px;

        .el-input__wrapper {
          background-color: #2E343C;
        }
      }
    }
  }

  .b-img{
    display: flex;
    padding: 4px 8px 4px 28px;

    &>div:nth-child(1) {
      width: 104px;
      font-size: 12px;
      line-height: 24px;
      color: #bcc9d4;
    }

    .link {
      width: 192px;
      height: 24px;

      .el-input__wrapper {
        background-color: #2E343C;
      }
    }

    .avatar {
      width: 192px;
      height: 120px;
      padding: 10px;
      margin-top: 3px;
      background-color: #262C33;
      border: 1px solid #0B0C0D;
      position: relative;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .mask {
        position: absolute;
        left: 0;
        top: 0;
        background-color: #0B0C0D;
        width: 100%;
        height: 100%;
        border: 1px solid #2681FF;
        display: flex;
        justify-content: center;
        align-items: center;

        &>span {
          padding: 0 8px;
          line-height: 1;
          border-right: 1px solid #bcc9d4;
          color: #bcc9d4;
          font-size: 12px;
          cursor: pointer;

          &:hover {
            color: #2681FF;
          }
        }

        &>span:last-child {
          border-right: none;
        }
      }
    }
  }

  .reset {
    display: flex;
    align-items: center;
    padding: 4px 8px 16px 28px;
    border-bottom: 1px solid #262c33;

    &>div:nth-child(1) {
      width: 104px;
      font-size: 12px;
      color: #bcc9d4;
    }

    &>div:nth-child(2) {
      height: 26px;
      line-height: 26px;
      padding: 0 20px;
      border: 1px solid #2681FF;
      font-size: 12px;
      color: #2681FF;
      cursor: pointer;

      &:hover {
        background-color: #2681FF;
        color: #fff;
      }
    }
  }

  .zoom {
    display: flex;
    align-items: center;
    padding: 16px 8px 4px 28px;

    &>div:nth-child(1) {
      width: 104px;
      font-size: 12px;
      color: #bcc9d4;
    }

    &>div:nth-child(2) {
      display: flex;

      &>i {
        width: 33px;
        height: 22px;
        margin-right: 4px;
        border: 1px solid #0B0C0D;
        font-size: 12px;
        color: #bcc9d4;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;

        &:hover {
          background-color: #2681FF;
          color: #fff;
        }
      }
    }
  }

  .gap {
    display: flex;
    align-items: center;
    padding: 4px 8px 4px 28px;

    &>div:nth-child(1) {
      width: 104px;
      font-size: 12px;
      color: #bcc9d4;
    }

    &>div:nth-child(2) {
      color: #5C6366;
      font-size: 12px;
      .el-input-number--small {
        width: 92px;
      }
    }
  }

  .watermark {
    display: flex;
    align-items: center;
    padding: 4px 8px 16px 28px;
    border-bottom: 1px solid #262c33;

    &>div:nth-child(1) {
      width: 104px;
      font-size: 12px;
      color: #bcc9d4;
    }
  }
}

footer {
  background-color: hsl(215, 15%, 13%);
  .thumb {
    display: flex;
    line-height: 26px;
    padding: 16px 8px 16px 28px;

    &>div:nth-child(1) {
      width: 104px;
      font-size: 12px;
      color: #bcc9d4;
    }

    .cover {

      &>div:nth-child(1) {

        &>span {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 94px;
          height: 24px;
          line-height: 26px;
          border: 1px solid #2681FF;
          font-size: 12px;
          color: #2681FF;
          cursor: pointer;

          &:hover {
            background-color: #2681FF;
            color: #fff;
          }
        }
      }

      .screen-preview {
        margin-top: 8px;
        width: 192px;
        height: 108px;
        border: 1px solid #0B0C0D;
      }

      .upload-tip {
        font-size: 12px;
        color: #5c6366;
        margin-top: 4px;
      }
    }
  }
}
:deep(.el-input__wrapper) {
  background-color: #2E343C;
  border: 1px solid #0B0C0D;
  box-shadow: none;
}
</style>
